<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
    <script src="js/jquery-1.12.2.js"></script>
    <script>
        // $(function () { });
        window.onload = function () {
            // 获取top的高度
            var h = $(".top").height();
            var $nav = $(".nav");
            var navH = $(".nav").height();

            // 1. 绑定滚动事件
            $(window).scroll(function () {
                // console.log(1);
                // 获取 浏览器滚动的高度
                var scrollTop = $(document).scrollTop();
                // console.log(scrollTop);
                // 比较滚动的高度 和 top的高度
                if (scrollTop >= h) {
                    // 如果滚动的高度 大于 top的高度？
                    // $nav.css("position", "fixed");
                    $nav.css({
                        "position": "fixed",
                        "top": 0
                    });

                    // 给main设置margin
                    $(".main").css("margin-top", navH);
                } else {
                    // 如果滚动的高度 小于 top的高度？
                    $nav.css("position", "static");
                    $(".main").css("margin-top", 0);
                }


            });
        }
    </script>
</head>

<body>
<div class="top">
    <img src="img/fixNav/top.png"/>
</div>
<div class="nav">
    <img src="img/fixNav/nav.png"/>
</div>
<div class="main">
    <img src="img/fixNav/main.png"/>
</div>
</body>

</html>
